<template>
  <div>
    <!-- 导航栏 start -->
    <NavBar :title="title" />
    <!-- 导航栏 end -->

    <!-- 吸顶搜索 start -->
    <van-sticky :offset-top="46">
      <van-search shape="round" v-model="kw" @search="onSearch" placeholder="请输入企业名称关键字" />
    </van-sticky>
    <!-- 吸顶搜索 end -->

    <!-- 搜索结果 start -->
    <van-list class="my-shield-search" v-if="search === true && list.length > 0">
      <div class="search-item" v-for="(item, index) in list" :key="index">
        <span>{{ item.CompanyName }}</span>
        <span @click="onAdd(item.CompanyID)">屏蔽</span>
      </div>
    </van-list>
    <MyEmpty v-else />
    <!-- 搜索结果 end -->
  </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import { Sticky, Search, List, Button, Toast, Dialog } from "vant";
import MyEmpty from "@/components/MyEmpty.vue";
export default {
  name: "RefuseCompanySearch",
  components: { NavBar, [Sticky.name]: Sticky, [Search.name]: Search, [List.name]: List, [Button.name]: Button, MyEmpty, },
  props: ["title"],
  // 定义属性
  data() {
    return {
      kw: "",
      search: false,
      list: [],
    };
  },
  // 方法集合
  methods: {
    onSearch(val) {
      if (val === "") {
        Toast("请输入企业名称关键字");
        return;
      }
      this.search = false;
      this.$api.get('/PAC/GetCompanyPageListRefused', { keyword: val, pageIndex: 1, pageSize: 30 }).then(res => {
        if (res.success) {
          this.search = true;
          this.list = res.response;
        }
				else{
					this.list= [];
				}
      })
    },
    onAdd(companyid) {
      Dialog.confirm({ message: "确认屏蔽该企业？", }).then(() => {
        this.$api.post('/PAC/AddRefuseCompany?companyId='+companyid).then(res => {
          if (res.success) {
            this.$router.go(-1);
          }
          else { Toast.fail(res.msg); }
        })
      })
    },
  },
};
</script>

<style lang="less">
@import "vant/lib/dialog/index.less";
@import "@/assets/css/common.less";

.my-shield-search {
  display: flex;
  flex-direction: column;
  padding-left: 15px;
  margin-top: 56px;
  background-color: #fff;
}

.my-shield-search::before {
  content: "查询结果";
  display: flex;
  padding: 15px 0 10px;
  font-size: 15px;
  color: #bbb;
}

.my-shield-search .search-item {
  display: flex;
  align-items: center;
  padding: 14px 15px 14px 0;
  background-color: #fff;
}

.my-shield-search .search-item + .search-item {
  border-top: 0.5px solid #e8e8e8;
}

.my-shield-search .search-item span:nth-child(1) {
  display: flex;
  flex: 1;
  font-size: 16px;
  color: #333;
}

.my-shield-search .search-item span:nth-child(2) {
  display: flex;
  flex: 0 0 60px;
  justify-content: flex-end;
  font-size: 14px;
  color: #f00;
}
</style>